import { connect } from "dva";
import styles from "./index.less";
import { NavBar, Icon, Drawer } from "antd-mobile";
import iconMore from "../../assets/icon-more@3x.png";
import router from "umi/router";
import customerImg1 from "../../assets/customerImg1.jpg";
import customerImg2 from "../../assets/customerImg2.jpg";
import customerImg3 from "../../assets/customerImg3.jpg";
import customerImg4 from "../../assets/customerImg4.jpg";

function App({ reachStoreCustomer, dispatch }) {
  const { openDrawer } = reachStoreCustomer;
  function onDrawer() {
    dispatch({
      type: "reachStoreCustomer/onOpenDrawer",
      payload: {
        openDrawer: !openDrawer
      }
    });
  }
  const sidebar = () => (
    <div className={styles.drawer} onClick={e => e.stopPropagation()}>
      <div className={styles.filterContent}>
        <div className={styles.filterTip}>
          <div className={styles.customerSelect}>
            <span className={styles.filterTitle}>客户（可多选）</span>
            <div className={styles.tagModule}>
              <span className={styles.orangeTag}>我导购过的客户</span>
              <span className={styles.defaultTag}>我未导购过的客户</span>
              <span className={styles.defaultTag}>未知客户</span>
            </div>
          </div>
          <div className={styles.timeInterval}>
            <span className={styles.filterTitle}>时间区间</span>
            <div className={styles.timeModule}>
              <input className={styles.inputStyle} type="text" />
              <span className={styles.timeText}>小时之内</span>
            </div>
          </div>
        </div>
        <div className={styles.submitModule}>
          <div className={styles.clear}>
            <span className={styles.submitText}>清空</span>
          </div>
          <div className={styles.finish}>
            <span className={styles.submitText}>完成</span>
          </div>
        </div>
      </div>
    </div>
  );
  return (
    <div className={styles.normal}>
      <NavBar
        mode="dark"
        style={{
          backgroundColor: "#ffffff",
          color: "black"
        }}
        onLeftClick={() => {
          router.push("mainpage");
        }}
        icon={
          <Icon
            type="left"
            style={{
              fontSize: ".44rem"
            }}
          />
        }
        rightContent={[
          <span key="0" onClick={onDrawer} className={styles.filter}>
            筛选
          </span>
        ]}
      >
        <span className={styles.title}>到店客户</span>
      </NavBar>
      {openDrawer && (
        <div className={styles.drawerplan} onClick={onDrawer}>
          {sidebar()}
        </div>
      )}
      <div
        className={styles.customerModule}
        onClick={() => router.push("customerDetail")}
      >
        <div className={styles.customerModule + " " + styles.firstBorder}>
          <img className={styles.customerImg} src={customerImg1} />
          <div className={styles.detailRight}>
            <span className={styles.customerName}>张三</span>
            <div>
              <span className={styles.reachTime}>10：32到店</span>
              <span className={styles.reachCount}>到店8次</span>
            </div>
            <span className={styles.lastTimeBuy}>上次购买商品：无</span>
            <div className={styles.browse}>
              <span className={styles.tabBlue}>浏览</span>
              <span className={styles.productInfo}>
                正在浏览商品：iphonex 64G 黑色
              </span>
              <span className={styles.browseTime}>3分钟</span>
            </div>
            <div>
              <span className={styles.tabRed}>推荐</span>
              <span className={styles.recommendInfo}>
                可推荐商品：乐享4G不限流量套餐320元
              </span>
            </div>
          </div>
        </div>
      </div>
      <div
        className={styles.customerModule}
        onClick={() => router.push("customerDetail")}
      >
        <img className={styles.customerImg} src={customerImg2} />
        <div className={styles.detailRight}>
          <span className={styles.customerName}>李四</span>
          <div>
            <span className={styles.reachTime}>10：32到店</span>
            <span className={styles.reachCount}>到店8次</span>
          </div>
          <span className={styles.lastTimeBuy}>上次购买商品：无</span>
          <div className={styles.browse}>
            <span className={styles.tabBlue}>浏览</span>
            <span className={styles.productInfo}>
              正在浏览商品：iphonex 64G 黑色
            </span>
            <span className={styles.browseTime}>3分钟</span>
          </div>
          <div>
            <span className={styles.tabRed}>推荐</span>
            <span className={styles.recommendInfo}>
              可推荐商品：乐享4G不限流量套餐320元
            </span>
          </div>
        </div>
      </div>
      <div
        className={styles.customerModule}
        onClick={() => router.push("customerDetail")}
      >
        <img className={styles.customerImg} src={customerImg3} />
        <div className={styles.detailRight}>
          <span className={styles.customerName}>张三</span>
          <div>
            <span className={styles.reachTime}>10：32到店</span>
            <span className={styles.reachCount}>到店8次</span>
          </div>
          <span className={styles.lastTimeBuy}>上次购买商品：无</span>
          <div className={styles.browse}>
            <span className={styles.tabBlue}>浏览</span>
            <span className={styles.productInfo}>
              正在浏览商品：iphonex 64G 黑色
            </span>
            <span className={styles.browseTime}>3分钟</span>
          </div>
          <div>
            <span className={styles.tabRed}>推荐</span>
            <span className={styles.recommendInfo}>
              可推荐商品：乐享4G不限流量套餐320元
            </span>
          </div>
        </div>
      </div>
      <div
        className={styles.customerModule}
        onClick={() => router.push("customerDetail")}
      >
        <img className={styles.customerImg} src={customerImg4} />
        <div className={styles.detailRight}>
          <span className={styles.customerName}>张三</span>
          <div>
            <span className={styles.reachTime}>10：32到店</span>
            <span className={styles.reachCount}>到店8次</span>
          </div>
          <span className={styles.lastTimeBuy}>上次购买商品：无</span>
          <div className={styles.browse}>
            <span className={styles.tabBlue}>浏览</span>
            <span className={styles.productInfo}>
              正在浏览商品：iphonex 64G 黑色
            </span>
            <span className={styles.browseTime}>3分钟</span>
          </div>
          <div>
            <span className={styles.tabRed}>推荐</span>
            <span className={styles.recommendInfo}>
              可推荐商品：乐享4G不限流量套餐320元
            </span>
          </div>
        </div>
      </div>
      <div className={styles.bottomModule}>
        <img className={styles.iconMore} src={iconMore} />
      </div>
    </div>
  );
}

export default connect(({ reachStoreCustomer }) => ({ reachStoreCustomer }))(
  App
);
